<template>
  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h2 class="sub-header">添加信息</h2>
    <div class="form-group">
      <label for>姓名</label>
      <input
        type="text"
        class="form-control"
        id
        name="name"
        required
        minlength="2"
        maxlength="10"
        placeholder="请输入姓名"
        v-model="student.name"
      />
    </div>
    <div class="form-group">
      <label for>性别</label>
      <div>
        <label class="radio-inline">
          <input type="radio" :checked="true" name="gender" value="0" v-model="student.gender" /> 男
        </label>
        <label class="radio-inline">
          <input type="radio" name="gender" value="1" v-model="student.gender" /> 女
        </label>
      </div>
    </div>
    <div class="form-group">
      <label for>年龄</label>
      <input
        class="form-control"
        type="number"
        id
        name="age"
        required
        min="1"
        max="150"
        placeholder="请输入年龄"
        v-model="student.age"
      />
    </div>
    <div class="form-group">
      <label for>爱好</label>
      <input
        class="form-control"
        type="text"
        v-model="student.hobbies"
        id
        name="hobbies"
        placeholder="请输入爱好"
      />
    </div>
    <button @click="doSubmit" class="btn btn-primary">提交</button>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      student: { gender: 0 },
      disabled: true
    };
  },
  methods: {
    doSubmit() {
      if (!this.student.name) {
        Toast({
          message: "请输入用户名！",
          position: "middle",
          duration: 1000,
          iconClass: "glyphicon glyphicon-remove"
        });
        return false;
      }
      if (!this.student.hobbies) {
        Toast({
          message: "请输入爱好！",
          position: "middle",
          duration: 1000,
          iconClass: "glyphicon glyphicon-remove"
        });
        return false;
      }
      if (!this.student.age) {
        Toast({
          message: "请输入年龄！",
          position: "middle",
          duration: 1000,
          iconClass: "glyphicon glyphicon-remove"
        });
        return false;
      } else {
        var formData = JSON.stringify(this.student);
        this.$http
          .post("/students/new", formData)
          .then(() => {
            this.$parent.getStudents();
            Toast({
              message: "添加信息成功！",
              position: "middle",
              duration: 1000,
              iconClass: "glyphicon glyphicon-ok"
            });
            this.$router.push("/students")
          })
          .catch(function() {
            console.log("服务器异常！");
          });
      }
    }
  }
};
</script>
<style>
</style>